<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康知识</view>
            <view class="right">
                <u-icon name="search" size="32" color="#333" @click="showSearch"></u-icon>
            </view>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-bar" v-if="showSearchBar">
            <view class="search-input">
                <u-icon name="search" size="28" color="#999"></u-icon>
                <input 
                    type="text" 
                    v-model="searchText" 
                    placeholder="搜索文章"
                    @confirm="search"
                />
                <u-icon 
                    v-if="searchText" 
                    name="close" 
                    size="28" 
                    color="#999"
                    @click="clearSearch"
                ></u-icon>
            </view>
            <text class="cancel" @click="hideSearch">取消</text>
        </view>
        
        <!-- 分类列表 -->
        <scroll-view class="categories" scroll-x>
            <view 
                class="category-item" 
                v-for="(item, index) in categories" 
                :key="index"
                :class="{ active: currentCategory === index }"
                @click="switchCategory(index)"
            >
                <text>{{item.name}}</text>
            </view>
        </scroll-view>
        
        <!-- 文章列表 -->
        <scroll-view 
            class="articles" 
            scroll-y 
            @scrolltolower="loadMore"
            refresher-enabled
            :refresher-triggered="refreshing"
            @refresherrefresh="onRefresh"
        >
            <view 
                class="article-item" 
                v-for="(item, index) in articleList" 
                :key="index"
                @click="viewArticle(item)"
            >
                <view class="cover">
                    <image :src="item.cover" mode="aspectFill"></image>
                </view>
                <view class="content">
                    <view class="title">{{item.title}}</view>
                    <view class="desc">{{item.desc}}</view>
                    <view class="info">
                        <view class="author">
                            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
                            <text>{{item.author}}</text>
                        </view>
                        <view class="meta">
                            <view class="item">
                                <u-icon name="eye" size="24" color="#999"></u-icon>
                                <text>{{item.views}}</text>
                            </view>
                            <view class="item">
                                <u-icon name="heart" size="24" color="#999"></u-icon>
                                <text>{{item.likes}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="loading" v-if="loading">
                <view class="loading-icon"></view>
                <text>加载中...</text>
            </view>
            
            <!-- 没有更多 -->
            <view class="no-more" v-if="!hasMore">
                <text>没有更多了</text>
            </view>
            
            <!-- 空状态 -->
            <view class="empty" v-if="articleList.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>暂无内容</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showSearchBar: false,
            searchText: '',
            categories: [
                {
                    name: '全部',
                    value: 'all'
                },
                {
                    name: '疾病预防',
                    value: 'prevention'
                },
                {
                    name: '健康饮食',
                    value: 'diet'
                },
                {
                    name: '运动健身',
                    value: 'fitness'
                },
                {
                    name: '心理健康',
                    value: 'mental'
                },
                {
                    name: '养生保健',
                    value: 'wellness'
                }
            ],
            currentCategory: 0,
            articleList: [],
            loading: false,
            hasMore: true,
            refreshing: false,
            page: 1
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        showSearch() {
            this.showSearchBar = true
        },
        hideSearch() {
            this.showSearchBar = false
            this.searchText = ''
        },
        clearSearch() {
            this.searchText = ''
        },
        search() {
            if (!this.searchText.trim()) {
                uni.showToast({
                    title: '请输入搜索内容',
                    icon: 'none'
                })
                return
            }
            
            // 模拟搜索
            this.page = 1
            this.articleList = []
            this.loadArticles()
        },
        switchCategory(index) {
            this.currentCategory = index
            this.page = 1
            this.articleList = []
            this.loadArticles()
        },
        loadArticles() {
            if (this.loading) return
            
            this.loading = true
            
            // 模拟加载数据
            setTimeout(() => {
                const newArticles = Array(10).fill().map((_, i) => {
                    const id = this.articleList.length + i + 1
                    return {
                        id,
                        title: `健康知识文章 ${id}`,
                        desc: '这是一篇关于健康知识的文章，包含了很多实用的健康建议和专业知识。',
                        cover: `/static/images/article-${(id % 5) + 1}.jpg`,
                        author: '健康医生',
                        avatar: '/static/images/doctor.png',
                        views: Math.floor(Math.random() * 10000),
                        likes: Math.floor(Math.random() * 1000),
                        category: this.categories[this.currentCategory].value
                    }
                })
                
                this.articleList = [...this.articleList, ...newArticles]
                this.loading = false
                this.hasMore = this.page < 3
                this.page++
            }, 1000)
        },
        loadMore() {
            if (this.hasMore && !this.loading) {
                this.loadArticles()
            }
        },
        onRefresh() {
            this.refreshing = true
            this.page = 1
            this.articleList = []
            
            // 模拟刷新
            setTimeout(() => {
                this.loadArticles()
                this.refreshing = false
            }, 1000)
        },
        viewArticle(article) {
            uni.navigateTo({
                url: `/pages/health/article?id=${article.id}`
            })
        }
    },
    onLoad() {
        this.loadArticles()
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .search-bar {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .search-input {
            flex: 1;
            display: flex;
            align-items: center;
            height: 60rpx;
            background-color: #F7F7FA;
            border-radius: 30rpx;
            padding: 0 20rpx;
            margin-right: 20rpx;
            
            input {
                flex: 1;
                height: 100%;
                font-size: 28rpx;
                color: #333;
                margin: 0 20rpx;
            }
        }
        
        .cancel {
            font-size: 28rpx;
            color: #666;
        }
    }
    
    .categories {
        white-space: nowrap;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .category-item {
            display: inline-block;
            padding: 10rpx 30rpx;
            font-size: 28rpx;
            color: #666;
            position: relative;
            
            &.active {
                color: #1890FF;
                font-weight: bold;
                
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40rpx;
                    height: 4rpx;
                    background-color: #1890FF;
                    border-radius: 2rpx;
                }
            }
        }
    }
    
    .articles {
        height: calc(100vh - 200rpx);
        padding: 20rpx 30rpx;
        
        .article-item {
            display: flex;
            background-color: #fff;
            border-radius: 10rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .cover {
                width: 200rpx;
                height: 150rpx;
                margin-right: 20rpx;
                
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
            }
            
            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
                
                .title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 10rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
                
                .desc {
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                    margin-bottom: 10rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                
                .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: auto;
                    
                    .author {
                        display: flex;
                        align-items: center;
                        
                        .avatar {
                            width: 40rpx;
                            height: 40rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                    
                    .meta {
                        display: flex;
                        
                        .item {
                            display: flex;
                            align-items: center;
                            margin-left: 20rpx;
                            
                            text {
                                font-size: 24rpx;
                                color: #999;
                                margin-left: 10rpx;
                            }
                        }
                    }
                }
            }
        }
        
        .loading, .no-more {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30rpx 0;
            
            text {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }
        }
        
        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 100rpx 0;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #999;
            }
        }
    }
}
</style> 